<template>
  <div>
    <Dialog
      class="two-columns"
      title="查看套餐详情"
      :visible.sync="modalShow"
      :width="60"
      :reveal="false"
      @close="modalClose"
    >
      <el-row>
        <el-col :span="6">编号：{{ billingData.no }}</el-col>
        <el-col :span="6">名称：{{ billingData.dataName }}</el-col>
        <el-col :span="6">分类：{{ billingData.classifyName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">拼音码：{{ billingData.pinyinCode }}</el-col>
        <el-col :span="6">套餐价格：{{ billingData.price }}</el-col>
        <el-col :span="6">折扣下限：{{ billingData.discount }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">状态：{{ billingData.status }}</el-col>
        <el-col :span="6">创建人：{{ billingData.creator }}</el-col>
        <el-col :span="8">创建时间：{{ billingData.createdTime }}</el-col>
      </el-row>
      <div>
        <ul
          v-if="
            billingData.comboDetailDtoList &&
              billingData.comboDetailDtoList.length > 0
          "
        >
          <li class="detailed">商品清单：</li>
          <li v-for="(items, i) of billingData.comboDetailDtoList" :key="i">
            <el-row style="width: 100%">
              <el-row type="flex">
                <el-col :span="20" class="product">
                  <el-button class="bg" type="text">{{
                    items.type.split("类")[0]
                  }}</el-button><span style="margin-left: 10px; line-height: 30px">{{
                    items.type === "项目类"
                      ? items.productDto.name
                      : items.materialMedicineDto.name
                  }}</span>
                  <p style="margin: 0px 10px">{{ items.printName }}</p>
                </el-col>
                <el-col :span="2" :offset="2"> x {{ items.count }} </el-col>
              </el-row>
              <el-row class="grey" type="flex">
                <el-col :span="20">
                  <span>规格：{{
                    items.type === "项目类"
                      ? items.productDto.specifications
                      : items.materialMedicineDto.spec
                  }}</span>
                  <span>单位：{{
                    items.type === "项目类"
                      ? items.productDto.unit
                      : items.materialMedicineDto.unit
                  }}</span>
                  <span
                    v-if="items.type === '项目类'"
                  >使用次数：{{ items.productDto.usageTimes }}</span>
                </el-col>
              </el-row>
              <el-row type="flex" class="price">
                <el-col :span="6">
                  售价：￥{{ items.comboPrice }} x {{ items.count }} = ￥{{
                    items.comboPrice * items.count
                  }}
                </el-col>
                <el-col :span="5" :offset="8">
                  套餐折扣：{{ items.discount }}%
                </el-col>
                <el-col :span="5">
                  套餐金额：￥{{ (items.comboPrice * items.discount) / 100 }}
                </el-col>
              </el-row>
            </el-row>
          </li>
        </ul>
        <el-row>
          <el-col
            :offset="20"
            :span="6"
          >总额：￥{{ billingData.originalPrice }}</el-col>
          <el-col
            :offset="20"
            :span="6"
          >优惠：-￥{{ billingData.discountPrice }}</el-col>
          <el-col
            :offset="20"
            :span="6"
          >合计：<span class="span">￥{{ billingData.price }}</span></el-col>
        </el-row>
      </div>
      <!-- <el-row type="flex" class="margin-top">
        <el-col :span="3" :offset="10">
          <el-button plain class="submitButtons" @click="modalClose">关闭</el-button>
        </el-col>
      </el-row> -->
      <div class="all-margin-bottom" />
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog';
export default {
  components: {
    Dialog,
  },
  props: {
    billingData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      modalShow: false,
    };
  },
  methods: {
    init() {
      this.modalShow = true;
    },
    modalClose() {
      this.modalShow = false;
    },
  },
};
</script>
<style scoped lang='scss'>
.margin-top {
  margin-top: 30px;
}
.el-col-offset-8,
.el-col-offset-2 {
  .el-button {
    margin-top: 15px;
    width: 100%;
    height: 40px;
  }
}
/deep/.el-form-item__content {
  margin-left: 50px !important;
}
.span {
  color: #ff6600;
}
.grey {
  color: #aaaaaa;
}
.bg {
  background: rgba(211,223,247,0.7);
  width: 50px;
  height: 25px;
  text-align: center;
  border-radius: 10px;
  color: #666;
  line-height: 8px;
  margin-top: 3px;
}
.product {
  display: flex;
}
.price {
  border-bottom: 1px solid #797979;
  padding-bottom: 10px;
  .el-col {
    display: flex;
  }
}
.el-row,
span {
  line-height: 40px;
}
li {
  display: flex;
  margin-top: 5px;
}
.detailed {
  margin: 15px 0;
}
div > span {
  margin-right: 25px;
}
</style>
